<template>
	<view>
		<view class="bgctop flexcenter">
			<view class="contentpage flexbetween">
				<view class="titletext xiaobai fonweight">首页</view>
				<view class="denglu ershil xiaobai fonweight" v-if="!islogin" @click="loginshow()">登录</view>
			</view>
		</view>
		<el-dialog title="登录" :visible.sync="dialogTableVisible" width="30%">
			<el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
				<el-form-item label="账号" prop="account">
					<el-input v-model="form.account" placeholder="请输入账号" style="width: 600rpx;"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input placeholder="请输入密码" v-model="form.password" style="width: 600rpx;"
						show-password></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		name: "headertop",
		data() {
			return {
				dialogTableVisible: false,
				form: {
					account: "",
					password: ""
				},
				rules: {
					account: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				},
				islogin: false,
			};
		},
		created() {
			this.islogin = httpRequest.checkIsLogin();
		},
		methods: {
			loginshow() {
				this.dialogTableVisible = true
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						httpRequest.request('/api/user/login', 'GET', {
							account: this.form.account,
							password: this.form.password
						}).then(res => {
							if (res.code == 1) {
								uni.clearStorageSync();
								uni.hideLoading()
								uni.setStorageSync('token', res.data.userinfo.token);
								uni.setStorageSync('user_id', res.data.userinfo.user_id);
								this.dialogTableVisible = false
								this.$message.success("登录成功");
								this.islogin = true
							} else {
								this.$message.error(res.msg);
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		},
	}
</script>

<style>
	.bgctop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background: linear-gradient(180deg, #F47D76 10%, #F3271C 100%), #000000;
		box-sizing: border-box;
		z-index: 1000;
	}

	.denglu {
		border-radius: 10rpx;
		padding: 15rpx 40rpx;
		border: 1rpx solid #fff;
		background-color: #f77b76;
	}
</style>